package com.example.myapplication.base

import com.example.sihookuiklydemo.base.BasePager
import com.example.sihookuiklydemo.base.ToastDialog
import com.example.sihookuiklydemo.utils.InPutUtils
import com.example.sihookuiklydemo.utils.checkInput
import com.example.sihookuiklydemo.utils.getCancelText
import com.example.sihookuiklydemo.utils.getConfirmText
import com.tencent.kuikly.core.base.Animation
import com.tencent.kuikly.core.base.Border
import com.tencent.kuikly.core.base.BorderStyle
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ComposeView
import com.tencent.kuikly.core.base.ComposeAttr
import com.tencent.kuikly.core.base.ComposeEvent
import com.tencent.kuikly.core.base.Translate
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.base.ViewContainer
import com.tencent.kuikly.core.directives.vif
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.reactive.handler.observableList
import com.tencent.kuikly.core.views.Input
import com.tencent.kuikly.core.views.Modal
import com.tencent.kuikly.core.views.Text
import com.tencent.kuikly.core.views.View
import com.tencent.kuikly.core.views.compose.Button

internal class DeviceNameActionSheetView :
    ComposeView<DeviceNameActionSheetViewAttr, DeviceNameActionSheetEvent>() {
    var animated: Boolean by observable(false)
    var isConfirm: Boolean by observable(false)
    private var chooseIdx: Int by observable(0)
    private var chooseValue: String by observable("")
    var didFirstLayout = false
    private var list by observableList<String>()
    override fun created() {
        super.created()

    }

    override fun createEvent(): DeviceNameActionSheetEvent {
        return DeviceNameActionSheetEvent()
    }

    override fun createAttr(): DeviceNameActionSheetViewAttr {
        return DeviceNameActionSheetViewAttr()
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {

                absolutePosition(0f, 0f, 0f, 0f)
                justifyContentCenter()

                if (ctx.animated) {
                    backgroundColor(Color(0, 0, 0, 0.5f))
                } else {
                    backgroundColor(Color(0, 0, 0, 0f))
                }
                animation(Animation.linear(0.2f), ctx.animated)
                padding(16f)

            }
            event {
                click {
                    ctx.animated = false
                }
                animationCompletion {
                    if (!ctx.animated) {
                        if (ctx.isConfirm) {
                            ctx.event.confirmClickHandler?.invoke(ctx.attr.deviceName)
                        } else {
                            ctx.event.cancelClickHandler?.invoke()
                        }
                        /*KLog.i("ActionSheetView", "animationCompletion $it")
                        this@DeviceNameActionSheetView.emit(
                            LanguageActionSheetEvent.CLOSE,
                            ctx.chooseValue
                        );*/
                    }
                }
            }
            View {
                event {
                    click { }
                }
                attr {

                    backgroundColor((getPager() as BasePager).theme.colors.background)

                    borderRadius(16f)
                    if (ctx.animated) {
                        transform(Translate(0f, 0f))
                    } else {
                        transform(Translate(0f, 2.5f))
                    }
                    animation(Animation.linear(0.2f), ctx.animated)
                }
                Text {
                    attr {
                        text(ctx.attr.nameTag)
                        fontSize(18f)
                        useDpFontSizeDim(true)
                        marginTop(24f)
                        color((getPager() as BasePager).theme.colors.mainTextColor)
                        alignSelfCenter()
                    }
                }
                View {
                    attr {

                        justifyContentCenter()
                        marginLeft(24F)
                        marginRight(24f)
                        marginTop(18f)
                        borderRadius(24f)
                        border(
                            Border(
                                2f,
                                BorderStyle.SOLID,
                                Color(Color.parseString16ToLong("ffE0E2E7"))
                            )
                        )
                    }
                    Input {
                        attr {
                            textAlignCenter()
                            autofocus(true)
                            text(ctx.attr.deviceName)
                            height(48f)

                            marginLeft(16f)
                            marginRight(16f)
                            useDpFontSizeDim(true)
                            color((getPager() as BasePager).theme.colors.mainTextColor)

                        }
                        event {
                            textDidChange {

                                ctx.attr.deviceName = it.text
                            }
                        }
                    }
                }

                View {
                    attr {
                        flexDirectionRow()

                    }
                    Button {

                        attr {

                            titleAttr {
                                text(getCancelText())
                                useDpFontSizeDim(true)
                                fontSize(15f)
                                color(Color.parseString16ToLong("ff98A2AC"))
                            }
                            height(80f)
                            flex(1f)


                        }
                        event {
                            click {
                                ctx.animated = false
                                ctx.isConfirm = false
                            }

                        }
                    }
                    Button {

                        attr {
                            titleAttr {
                                text(getConfirmText())
                                color(Color.BLACK)
                                useDpFontSizeDim(true)
                                fontSize(15f)
                                color((getPager() as BasePager).theme.colors.mainTextColor)
                            }

                            height(80f)
                            flex(1f)


                        }
                        event {
                            click {
                                var code = checkInput(ctx.attr.deviceName)
                                when (code) {
                                    InPutUtils.INPUT_LENGTH_ERROR -> {
                                       // showTopToast("名称不能大于15个字符")
                                        var msg=(ctx.getPager() as BasePager).getFormatLanguage("common_name_length_prompt",ctx.attr.nameTag)

                                        ctx.toastMsg=msg?:"名称不能大于15个字符"
                                        ctx.showMsgDialog=true
                                    }
                                    InPutUtils.INPUT_EMPTY->{

                                        var msg= (ctx.getPager() as BasePager).getFormatLanguage("common_name_empty_prompt",ctx.attr.nameTag)

                                        ctx.toastMsg=msg?:"名称不能为空"
                                        ctx.showMsgDialog=true
                                    }
                                    InPutUtils.INPUT_FORMAT_WRONG->{
                                        var msg=(ctx.getPager() as BasePager).getFormatLanguage("common_name_format_prompt",ctx.attr.nameTag)
                                        ctx.toastMsg=msg?:"只支持中英文数字及下划线"
                                        ctx.showMsgDialog=true
                                    }

                                    else -> {
                                        ctx.animated = false
                                        ctx.isConfirm = true
                                    }
                                }


                            }

                        }
                    }
                    vif({ ctx.showMsgDialog }) {
                        Modal {
                            ToastDialog {
                                attr {
                                    msg = ctx.toastMsg
                                }
                                event {
                                    onDissMiss {
                                        ctx.showMsgDialog = false
                                    }
                                }
                            }
                        }
                    }
                }
            }


        }
    }
    var showMsgDialog by observable(false)
    var toastMsg :String=""

    override fun viewDidLayout() {
        super.viewDidLayout()
        animated = true
    }
}


internal class DeviceNameActionSheetViewAttr : ComposeAttr() {
    var deviceName = ""
    var nameTag=""
}

internal class DeviceNameActionSheetEvent : ComposeEvent() {
    var cancelClickHandler: (() -> Unit)? = null
    var confirmClickHandler: ((deviceName: String) -> Unit)? = null

    fun onCancelClick(handler: () -> Unit) {
        cancelClickHandler = handler
    }

    fun onConfirmClick(handler: (deviceName: String) -> Unit) {
        confirmClickHandler = handler
    }
    /*fun close(handler: EventHandlerFn) {
        registerEvent(CLOSE, handler)
    }*/

    companion object {
        const val CLOSE = "close"
    }
}

internal fun ViewContainer<*, *>.DeviceNameActionSheetEvent(init: DeviceNameActionSheetView.() -> Unit) {
    addChild(DeviceNameActionSheetView(), init)
}